﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MWS_AddDirectory.GeoBusqueda.Default" %>

<style>
    #demo-frame > div.demo
    {
        padding: 10px !important;
        
    }
    
    #MapaBusqueda
    {
    border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-color:#ccc;
	background-color:#F8F8F8;
    }
    
    #ContenedorGeoBusqueda
    {
        border-top: solid 1px #ccc;
    }
  
    
</style>
<form id="FormGeoBusqueda" runat="server">
Buscador Geografico
<div id="DivparametrosBusqueda" style="width:100%; margin-bottom:15px;">
<div id="GeoUbicarme" style="width:300px; display:none;">Geo Ubicarme</div>
            <span id="radioValor">Buscando a <span id="radioValorSpan">100</span>mts a la redonda</span>
            <div class="demo">
                <div id="sliderRadio">
                </div>
            </div>
        </div>
<div id="ContenedorGeoBusqueda" style="width: 320px;" class="wallContainer">
    <div id="MapaBusqueda" style="width: 320px; height: 250px; float: left; overflow:hidden;">
    </div>
</div>
</form>
<script>
    // Inicialización de variables.
    var map = null;
    var geocoder = null;
    var marker = null;
    var circle = null;
    var puntoLatitud = null;
    var puntoLongitud = null;
    var puntoRadio = 100;
    var listaMarcadores = [];
    var listaAnuncios = [];
    var xmlAnuncios = null;
    var infoWin = new google.maps.InfoWindow();
    var listaMark = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

    function loadMapaNegocios() {
        var puntoInicial = $('#posicionCiudadMapa').val().split(',');
        var anuncioLat = puntoInicial[0];
        var anuncioLong = puntoInicial[1];
        puntoLatitud = puntoInicial[0];
        puntoLongitud = puntoInicial[1];
        MostrarMapa('MapaBusqueda', anuncioLat, anuncioLong);
    }

    function MostrarMapa(idMapa, anuncioLat, anuncioLong) {
        var options = {
            zoom: 16
		, center: new google.maps.LatLng(anuncioLat, anuncioLong)
		, mapTypeId: google.maps.MapTypeId.ROADMAP
        , 'scaleControl': true
        };
        map = new google.maps.Map(document.getElementById(idMapa), options);
        geocoder = new google.maps.Geocoder();
        var image = new google.maps.MarkerImage(
    'http://www.directoriodetizayuca.com/image.png',
    new google.maps.Size(50, 60),
    new google.maps.Point(0, 0),
    new google.maps.Point(25, 60)
  );

        var shadow = new google.maps.MarkerImage(
    'http://www.directoriodetizayuca.com/shadow.png',
    new google.maps.Size(84, 60),
    new google.maps.Point(0, 0),
    new google.maps.Point(25, 60)

  );

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(anuncioLat, anuncioLong)
            , map: map
            , title: 'Arrastre para determinar la posicion del Anunciante'
            , icon: image
			, shadow: shadow
            , draggable: true
        });

        circle = new google.maps.Circle({
            map: map,
            fillColor: '#ff6600',
            strokeColor: '#2760BA',
            fillOpacity: .2,
            strokeOpacity: .7,
            strokeWeight: 2,
            radius: 100 // 3000 km
        });

        // Since Circle and Marker both extend MVCObject, you can bind them
        // together using MVCObject's bindTo() method.  Here, we're binding
        // the Circle's center to the Marker's position.
        // http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
        circle.bindTo('center', marker, 'position');

        google.maps.event.addListener(marker, 'dragend', function () {
            geocode({ 'latLng': marker.getPosition() });
        });
    }

    function geocode(request) {

        if (request.latLng) {
            puntoLatitud = request.latLng.lat();
            puntoLongitud = request.latLng.lng();
            realizarBusqueda(puntoLatitud, puntoLongitud, puntoRadio);
        }
    }
    //        google.maps.event.addListener(map, 'click', function (event) {
    //            marker.setPosition(event.latLng)
    //            geocode({ 'latLng': event.latLng });
    //        });
    function realizarBusqueda(latitud, longitud, distancia) {
        $("#ContenedorGeoBusqueda .inline, .noPagado").remove();
        urlBusqueda = "/GeoBusqueda/?noRegistros=26&distancia=" + distancia + "&lat=" + latitud + "&lon=" + longitud;
        //$("#ResultadoBusqueda").append(urlBusqueda);
        $.ajax({
            type: "GET",
            url: urlBusqueda,
            dataType: "xml",
            success: function (xml) {
                xmlAnuncios = xml;
                listaAnuncios = null;
                listaAnuncios = [];
                if (listaMarcadores) {
                    for (i in listaMarcadores) {
                        listaMarcadores[i].setMap(null);
                        listaMarcadores[i] = null;
                    }
                }
                listaMarcadores = null;
                listaMarcadores = [];
                $(xml).find('Anuncio').each(function (i) {
                    var anuncio = this;
                    listaAnuncios.push(anuncio);
                    setTimeout(function () {
                        CrearPuntoNegocio(anuncio, i);
                    }, i * 66);
                });
                activarAnuncios();
            }
        });
    }


    function CrearPuntoNegocio(anuncioParametro,noAnuncio) {
        var anuncio = $(anuncioParametro);
        
        //alert(anuncio.attr("Longitud"));
        var animacion = google.maps.Animation.DROP;
        var color = "777777";

        if (anuncio.attr("idTipoAnuncio") == 2) {
            //animacion = google.maps.Animation.BOUNCE
            if (noAnuncio%2!=0)
                color = "FF6600";
            else
                color = "2760BA";
        }

        var markerNuevo = new google.maps.Marker({
            position: new google.maps.LatLng(anuncio.attr("Latitud"), anuncio.attr("Longitud"))
            , map: map
            , title: anuncio.attr("nombre")
            , animation: animacion
            , icon: "http://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=pin'i%5c'%5b" + listaMark[noAnuncio] + "'-2'f%5chv'a%5c%5dh%5c%5do%5c" + color + "'fC%5cffffff'tC%5c000000'eC%5cLauto'f%5c&ext=.png" //"http://www.googlemapsmarkers.com/v1/" + listaMark[noAnuncio] + "/"+color+"/"
            //	, shadow: "http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png"
            //  , draggable: true
        });
        pushListaResultados(anuncio, noAnuncio, color);
        
        listaMarcadores.push(markerNuevo);
  
    }

    function pushListaResultados(anuncio, noAnuncio, colorAnuncio) {
        var color = "777777";

        if (anuncio.attr("idTipoAnuncio") == 2) {
            //animacion = google.maps.Animation.BOUNCE
            if (noAnuncio % 2 != 0)
                color = "FF6600";
            else
                color = "2760BA";
        }
        var AnuncioNoPagado = "<div class='container noPagado'><div><span>{NOMBRENEGOCIO}</span></div></div>";
        var AnuncioPagado = "<div class='inline'>" +
            "<div id='AddContainer' class='container tiny '>" +
                "<div id='AddContent' class='imagenAnuncio' style='top: 0px; '>" +
                    "<input type='hidden' value='{URLANUNCIO}' id='AddURL'/>" +
                    "<div id='ImageContainer'>" +
                        "<div id='imageScreen'>" +
                            "<div>" +
                                "<a href='{URLANUNCIO}'>" +
                                    "<img src='{IMAGENNEGOCIO}' border='0'>" +
                                "</a>" +
                            "</div>" +
                        "</div>" +
                        "<div id='tituloAdd'>" +
                            "<div id='tituloAddTexto' style='height:32px;'>{NOMBRENEGOCIO}</div>" +
                        "</div>" +
                        "<div id='contenedorDescripcion'>" +
                            "<div id='textoDescripcion'>{DESCRIPCIONNEGOCIO}</div>" +
                        "</div>" +
                    "</div>" +
                    "<div id='SectionContent' style='height:40px; overflow:hidden; display:none;'></div>" +
                "</div>" +
            "</div></div>";
        var mostrarContenido;
        if (anuncio.attr("idTipoAnuncio") == 2) {
            var urlImagen = anuncio.find("Imagen").attr("URLImagen");
            if (isMobile)
                urlImagen = urlImagen.replace('/files/', '/140/files/');
            else
                urlImagen = urlImagen.replace('/files/', '/219/files/');
            mostrarContenido = AnuncioPagado.replace('{IMAGENNEGOCIO}', urlImagen).replace(/{NOMBRENEGOCIO}/g,'<img src="http://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=pin\'i%5c\'%5b' + listaMark[noAnuncio] + '\'-2\'f%5chv\'a%5c%5dh%5c%5do%5c' + color + '\'fC%5cffffff\'tC%5c000000\'eC%5cLauto\'f%5c&ext=.png"/> '+ anuncio.attr("nombre")).replace(/{URLANUNCIO}/g, anuncio.attr("FullURL")).replace('{DESCRIPCIONNEGOCIO}', anuncio.find("descripcionMini").text());
        }
        else
            mostrarContenido = AnuncioNoPagado.replace(/{NOMBRENEGOCIO}/g, '<img src="http://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=pin\'i%5c\'%5b' + listaMark[noAnuncio] + '\'-2\'f%5chv\'a%5c%5dh%5c%5do%5c' + color + '\'fC%5cffffff\'tC%5c000000\'eC%5cLauto\'f%5c&ext=.png"/> ' + anuncio.attr("nombre"));
        $("#ContenedorGeoBusqueda").append(mostrarContenido);
        //"<div class='nombreNegocio' onclick='mostrarInfoAnuncio("+noAnuncio+")' style='background-color:#"+colorAnuncio+";'><div class='letra'>" + listaMark[noAnuncio] + "</div><div class='anuncioLateral'>" + anuncio.attr("nombre") + "</div></div>");
    }

    function mostrarInfoAnuncio(idAnuncio) {
        var anuncio = $(listaAnuncios[idAnuncio]);
        var contenidoVentana = "<div class='AnuncioMapa'><a href='" + anuncio.attr("FullURL") + "' target='_blank'><div class='imagen'><img class='logotipo' src='" + anuncio.find("Imagen").attr("URLImagen") + "'/></div><div class='titulo'>" + anuncio.attr("nombre") + "</div><div class='contenido'>" + anuncio.find("descripcionMini").text() + "</div></a></div>"
            infoWin.setContent(contenidoVentana);
                infoWin.open(map, listaMarcadores[idAnuncio]);
       
    }


    function onPositionUpdate(position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        //alert("Current position: " + lat + " " + lng);
        map.panTo(new google.maps.LatLng(lat, lng));
        marker.setPosition(new google.maps.LatLng(lat, lng));
        realizarBusqueda(lat, lng, puntoRadio);
    }
    if (navigator.geolocation) {
        $("#GeoUbicarme").show();
    }
    else
        alert("navigator.geolocation is not available");

    $().ready(function () {
        if (!isMobile) {
            $("#ContenedorGeoBusqueda").css("width", "960px");
            $("#MapaBusqueda").css("width", "479px").css("height","399px");
        }
        loadMapaNegocios();
        $("#sliderRadio").slider({
            value: 100,
            range: "min",
            min: 100,
            max: 1500,
            step: 100,
            stop: function (event, ui) {
                puntoRadio = ui.value;
                $("#radioValorSpan").text(ui.value);
                circle.setRadius(puntoRadio);
                realizarBusqueda(puntoLatitud, puntoLongitud, puntoRadio);
            }
        });
        $("#GeoUbicarme").button({
            icons: {
                primary: "ui-icon-flag"
            }
        }).click(function () {
            navigator.geolocation.getCurrentPosition(onPositionUpdate);
        });


    });
</script>
